<template>
    <div>
        <div class="info">
            <div class="title">
                <span class="title-text">编辑个人资料</span>
            </div>
            <hr />
            <div class="personal">
                <el-form
                    :model="registerForm"
                    ref="registerForm"
                    label-width="90px"
                    class="demo-ruleForm"
                    :rules="rules"
                >
                    <el-form-item prop="name" label="用户名">
                        <el-input
                            v-model="registerForm.name"
                            placeholder="用户名"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="introduction" label="个性签名">
                        <el-input
                            v-model="registerForm.introduction"
                            placeholder="个性签名"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div class="btn">
                    <div @click="saveMsg">保存</div>
                    <div @click="goBack(-1)">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { rules } from "@/assets/data/form";
import { mixin } from "@/mixins";
import { getUserInfo, updateUserMsg } from "../api/index";

export default {
    name: "info",
    mixins: [mixin],
    data() {
        return {
            registerForm: {
                name: "", // 用户名
                introduction: "", // 签名
            },
            rules: {}, // 表单提交的规则
            confirmPassword: "", // 确认密码
        };
    },
    computed: {
        ...mapGetters(["userId"]),
    },
    created() {
        this.rules = rules;
    },
    mounted() {
        this.getMsg(this.userId);
    },
    methods: {
        getMsg() {
            getUserInfo()
                .then((res) => {
                    this.registerForm.name = res.name;
                    this.registerForm.introduction = res.introduction;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        saveMsg() {
            let _this = this;
            updateUserMsg({
                name: this.registerForm.name,
                introduction: this.registerForm.introduction,
            })
                .then((res) => {
                    if (res.code === 1) {
                        _this.$store.commit(
                            "setUsername",
                            this.registerForm.name,
                        );
                        _this.notify("修改成功", "success");
                        setTimeout(function () {
                            _this.$router.push({ path: "/" });
                        }, 2000);
                    } else {
                        _this.notify("修改失败", "error");
                    }
                })
                .catch(() => {
                    _this.notify("修改失败", "error");
                });
        },
        goBack(index) {
            this.$router.go(index);
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/info.scss";
</style>
